<template>
  <div class="material">
    <loading :show="loading" />
    <v-title title="素材库" />
    <ul class="list">
      <template v-for="(item, index) in list">
        <li
          class="list-item"
          :key="index"
        >
          <div class="time">{{item.time}}</div>
          <div class="title">{{item.title}}</div>
          <div class="text" v-html="item.inText" v-if="item.inText"></div>
          <ul class="img" v-if="item.inImages && item.inImages.length > 0">
            <li
              v-for="(o, i) in item.inImages"
              :key="i"
            >
              <div class="image">
                <img v-lazy="o" @click="$preview(i, item.inImages)" />
              </div>
            </li>
          </ul>
          <cube-button
            primary
            @click="onCopy(item)"
          >复制</cube-button>
        </li>
      </template>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import PullUp from '@/components/PullUp'
import Title from '@/components/Title'
export default {
  name: 'Material',
  components: {
    Loading,
    PullUp,
    'v-title': Title,
  },
  data() {
    return {
      loading: false,
      queryList: {
      },
      list: []
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.loading = true
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Uni.getMaterial({ ...this.queryList }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
            // console.log(this.list)
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    onCopy(item) {
      const text = item.inText.replace(/<p>/g, '').replace(/<\/p>/g, '\r').replace(/<br \/>/g, '')
      this.$copyText(text).then(() => {
        this.$createToast({
          type: 'txt',
          time: 500,
          txt: '复制成功2',
          onTimeout: () => {
          }
        }).show()
      })
    }
  },
  created () {
    this.init()
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.material
  padding-top 40px
  background $background_color
  .list
    .list-item
      background white
      margin 10px
      padding 10px
      border-radius 10px
      display flex
      flex-direction column
      align-items start
      line-height 1.2
      font-size 14px
      .title
        font-weight 700
        margin 10px 0
      .time
        color #ccc
      .text
        font-size 16px
      .img
        margin 10px 0
        display flex
        flex-wrap wrap
        .image
          width 100px
          margin-right 10px
</style>
